<template>
	<view class="man-index">
		<view class="user-header">
			<view class="user-text">订单</view>
		</view>
		
		<view class="man-header">
			<view class="man-tab">
				<zzx-tabs :items="items" :current="current" @clickItem="onClickItem" ref="mytabs" :defaultColor='defaultColor'
				 :activeColor="activeColor" :acsize="acsize">
				</zzx-tabs>
			</view>
		</view>
		
		<!-- <load-refresh
		  ref="loadRefresh"
		  :refreshTime="800"
		  :heightReduce="10"
		  :backgroundCover="'#F3F5F5'"
		  :pageNo="page"
		  :totalPageNo="totalPage" 
		  @loadMore="loadMore">
		<view slot="content-list"> --> 
		<view class="cu-wra">
			<view class="man-wrapper" v-for="(item,index) in orderList" :key="index" @click.stop="hanldOrderInfo(item.id)" style="margin-bottom: 10px;">
				<view style="margin: 0 15px;">
					<view class="man-item">
						<view class="item-header">
							<view class="item-add">订单号：{{item.ordersn}}</view>
						</view>
						<view class="item-right">
							<view class="right-text">{{item.status_text}}</view>
						</view>
					</view>
					<view class="weight">
						<view class="weight-item" v-for="(itm,idx) in item.orderlog" :key="idx">
							<view class="weight-item-img">
								<image :src="itm.icon || '/static/img/daohang.png'" />
							</view>
							<view>
								<view class="weight-text">{{itm.name}}</view>
								<view class="weight-gj">{{itm.ordertype}}</view>
							</view>
						</view>
					</view>
					<view class="or-body">
						<view class="weight-tiem">预约时间 ：{{item.appointment}}</view>
						<view class="weight-tiem" style="font-weight: bold;">回收地址：{{item.address}}</view>
						<view class="weight-tiem" style="color: #898989;">下单时间：{{item.created}}</view>
					</view>
				</view>
				<view class="or-but">
					<view class="or-left">合计：
						<text style="color: #3E9AFC;font-size: 18px;font-weight: bold;"><text style="font-size: 14px;">≈¥ </text>{{item.total}}</text>
					</view>
					<view class="or-right" v-if="current == 0" @click.stop="cancleOrder(item.id)">取消订单</view>
					<!-- &&item.order_mobile -->
					<view class="but-con" v-if="current == 1&&item.order_mobile" @click.stop="contactRider(item)">
						<image src="/static/img/white-tel.png"></image>
						<view class="con-text">联系骑手</view>
					</view>
				</view>
			</view>
			
			<view v-if="loadAll&&orderList.length>=5" class="no-more-data">没有更多了</view>
			<view v-if="orderList.length == 0" class="no-more-data">
			  暂无数据
			</view>
			</view>
		</view>

		<!-- </view>
		</load-refresh> -->
		
	
	</view>
</template>

<script>
	import zzxTabs from "@/components/zzx-tabs/zzx-tabs.vue"
	import loadRefresh from '@/components/load-refresh/load-refresh.vue'

	//
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'

	//
	import popupLayer from '@/components/popup-layer/popup-layer.vue';
	export default {
		data() {
			return {
				items: ['未接单', '已接单', '已完成','已取消'],
				current: 0,
				defaultColor: '#000000',
				activeColor: '#3E9AFC',
				acsize:'14px',
				orderList:[],
				page:1,
				totalPage:1,
				loadAll:false,
			}
		},
		props:{
			loadmore:{
				type : Number,
				default:1
			}
		},
		components: {
			loadRefresh,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			popupLayer
		},
		watch:{
			loadmore:{
				deep:true,
				handler(newValue,oldValue){
					console.log(newValue)
					if((newValue >= 1 && newValue <= 2) && !this.loadAll){
						console.log('触发上拉加载')
						this.getorderlist();
					}
				}
			}
		},
		created() {
			//提交订单完跳转订单列表后清空index全局变量
			getApp().globalData.index = ''
			this.loadAll = false;
			this.orderList = [];
			this.page = 1;
			this.getorderlist()
		},
		methods: {
			//联系骑手
			contactRider(item){
				uni.makePhoneCall({
					// 手机号
					phoneNumber: item.order_mobile, 
				});
			},
			//取消订单
			cancleOrder(id){
				//orderdetail
				let params = {
					id:id
				}
				this.$http.order_cancel(params).then(res => {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					this.loadAll = false;
					this.orderList = [];
					this.page = 1;
					this.getorderlist();
				})
			},
			// refresh() {
			//   this.loadAll = false;
			//   this.orderList = [];
			//   this.page = 1;
			//   this.getorderlist();
			// },
			// loadMore() {
			//   console.log('上拉加载')
			//   if (!this.loadAll) {
			//     this.getorderlist();
			//   }
			// },
			//订单列表
			getorderlist(){
				let params = {
					status:this.current+1,
					page:this.page
				}
				this.$http.order_list(params).then(res => {
					if(res && res.data){
						let _list = res.data.data
						this.totalPage = res.data.last_page;
						let totalPage = res.data.last_page
						if (this.page > totalPage || _list.length == 0) {
						  this.loadAll = true
						  return
						}
						if(_list.length > 0){
						  this.orderList = this.orderList.concat(_list);
						}
						this.page++;
					}
				})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
					this.loadAll = false;
					this.orderList = [];
					this.page = 1;
					this.getorderlist();
				}
			},
			hanldOrderInfo(id){
				uni.navigateTo({
					url:'/pages/order/orderInfo?id='+id
				})
			}
		}
	}
</script>

<style scoped>
	.user-header{
		    text-align: center;
		    position: relative;
		    height: 44px;
		    font-size: 16px;
		    color: #111110;
		    font-weight: bold;
		    line-height: 44px;
		    position: fixed;
		    width: 100%;
		    background-color: #fff;
		    /* padding-bottom: 100px; */
		    z-index: 9999;
			top:0;
			padding-top: 20px;
	}
	/*联系骑手*/
	.but-con {
		display: flex;
		flex-direction: row;
		width: 208upx;
		height: 60upx;
		border-radius: 10upx;
		
		background: linear-gradient(124deg, #6AA7E8 0%, #3D9AFD 100%);
		
box-shadow: 0px 2px 4px 0px #1E75FF;
		font-size: 14px;
		color: #fff;
		text-align: center;
		line-height: 60upx;
		align-items: center;
		justify-content: center;
		background-color: ;
	}
	.but-con image {
		width: 16px;
		height: 16px;
		padding-right: 5px;
	}
	.cu-wra{
		margin-top: 224upx;
		padding-bottom: 100px;
		width: 100%;
	}
	.man-index {
		width: 100%;
		background-color: #FAFAFA;
		height: 100%;
	}
.man-index>>>.zzx-tabs .zzx-tabs-bar .zzx-bottom-line {
		background-color: #3E9AFC !important;
	}


	.man-index>>>.zzx-tabs .zzx-tabs-bar .zzx-bottom-line {
		background-color: #3E9AFC;
	}

	.man-index>>>.zzx-tabs .zzx-tabs-wrap .item-title {}

	.man-index>>>.popup-content {
		width: 546upx;
		    min-height: 100vh;
		    padding: 10px;
		    -webkit-box-sizing: border-box;
		    box-sizing: border-box;
		    position: fixed;
		    bottom: 0;
	}

	.man-header {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		background-color: #FFFFFF;
		position: fixed;
		width: 100%;

		z-index: 999999999;
		padding: 10px 0;
		
		/*  #ifdef H5  */
	    margin-top: 108upx;
		/*  #endif  */
		
		/*  #ifdef MP-WEIXIN  */
		top: 108upx;
		/*  #endif  */
	}

	.man-tab {
		width: 100%;
	}

	.man-but {
		width: 180upx;
		height: 60upx;
	
background: linear-gradient(124deg, #6AA7E8 0%, #3D9AFD 100%);

box-shadow: 0px 2px 4px 0px #1E75FF;
		border-radius: 10upx;
		text-align: center;
		line-height: 60upx;
		color: #FFFFFF;
		font-size: 14px;
		margin: auto;
	}

	.man-wrapper {
		background-color: #FFFFFF;
	}

	.man-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 10px 0px 0;
	}

	.item-header {
		width: 80%;
	}

	.item-right {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 20%;
		justify-content: flex-end;
	}

	.item-right image {
		width: 24px;
		height: 24px;
		vertical-align: middle;
	}

	.item-add {
		color: #898989;
		font-size: 12px;
	}

	.right-text {
		color: #3E9AFC;
		font-size: 15px;
		font-weight: bold;
		margin-left: 6px;
	}

	.weight {
		padding: 15px 0 10px 0;
		display: flex;
		flex-wrap: wrap;
	}

	.weight-item {
		color: #242424;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 5px;
	}

	.weight-item-img {
		flex-direction: row;
		align-items: center;
	}

	.weight-item-img image {
		width: 25px;
		height: 25px;
		vertical-align: middle;
	}

	.weight-text {
		padding: 0 4px;
		color: #242424;
		font-size: 15px;
		font-weight: bold;
	}

	.weight-gj {
		padding: 4px;
		color: #242424;
		font-weight: bold;
	}

	.weight-tiem {
		color: #242424;
		font-size: 12px;
		padding-top: 10px;
	}

	.weight-but {
		width: 100%;
		height: 108upx;
	
background: linear-gradient(124deg, #6AA7E8 0%, #3D9AFD 100%);

box-shadow: 0px 2px 4px 0px #1E75FF;
		font-size: 18px;
		color: #fff;
		text-align: center;
		line-height: 108upx;
		margin: 12px 0;
	}
.or-but{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 10px 20px;
	    align-items: center;
}

.or-body{
	border-top:1px solid #E5E5E5;
	border-bottom:1px solid #E5E5E5;
	padding-bottom: 10px;
}
.or-left{
	color: #141010;
	font-size: 15px;
}
.or-right{
	width:180upx;
	height:60upx;
	border-radius:10upx;
	border:1px solid rgba(52,54,51,1);
	text-align: center;
	line-height: 60upx;
	color: #343633;
	font-size: 14px;
}

	
	

</style>
